@import "../_variables";
@import "../widget/reset";
@import "../widget/swiper";
@import "../widget/quick_layout";
@import "../widget/animate";
@import "../widget/preloader";

html, body {
  height: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.box-mian-img {
  width: 110%;
  position: absolute;
  top: 0;
  left: 0;
}

.box1-button {
  width: 35%;
  position: absolute;
  bottom: 10%;
  margin-left: 33%;
}

.down {
  width: 7%;
  position: absolute;
  bottom: 3%;
  margin-left: 46%;
}

.downs {
  animation: downs 2s;
  animation-iteration-count: infinite;
  transform-origin: center;
}

@keyframes downs {
  0% {
    bottom: 3%;
  }

  50% {
    bottom: 1%;
  }

  100% {
    bottom: 3%;
  }
}

.box2-text {
  width: 80%;
  position: absolute;
  bottom: 9%;
  left: 0;
  margin-left: 8%;
  z-index: 2;
}

.public-tip-bg {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 1;
}

.swiper-slide-active .xiejiao {
  animation: xiejiao 2s;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

@keyframes xiejiao {
  0% {
    bottom: -8%;
  }

  100% {
    bottom: 0;
  }
}

.public-tip-sd {
  width: 100%;
  position: absolute;
  bottom: 12%;
  left: 0;
}

.star3 {
  animation: star3 3s linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes star3 {
  0% {
    opacity: .3;
    transform: scale(1,1);
  }

  50% {
    opacity: 1;
    transform: scale(.85,.85);
  }

  100% {
    opacity: .3;
    transform: scale(1,1);
  }
}

.erwiema {
  width: 100%;
  position: absolute;
  left: 0;
  top: -10%;
}

.end-muzi {
  width: 33%;
  position: absolute;
  left: 38%;
  top: 49%;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.swiper-slide-active .pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.swiper-slide-active .zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.swiper-slide-active .zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

.preloader_container {
  background: url("@{CONTEXT_PATH}/img/youku_summer/load_bg.jpg") left top repeat-y;
}

.preloader_content {
  width: 80%;
  line-height: 100px;
  height: 100px;
  text-align: center;
  font-size: 40px;
  color: #fff;
}